<!--
 * @Author: hucc
 * @Date: 2021-10-14 14:39:36
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-14 16:14:52
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{data1}}</h3>
        <h4>vuex-state-{{msg}}</h4>
        <button @click="SET_MSG('再见vuex')">修改状态机数据</button>
        <h5>vuex-getters-{{upperMsg}}</h5>
        <ul>
            <li v-for="(item,index) in categories" :key="index">
                栏目编号：{{item.id}} 栏目名称：{{item.name}}
                <!-- <button @click="deleteCategoryById(item.id)">删除</button> -->
            </li>
        </ul>
    </div>
    <script>
        //1.声明Vuex实例store
        let store = new Vuex.Store({
            state: {
                msg: 'this is vuex data',
                categories: []
            },
            getters: {
                upperMsg(state) {
                    return state.msg.toUpperCase();
                }
            },
            mutations: {
                //突变是修改state中数据的唯一方法
                //突变方法有两个参数 第一个是state，第二个是调用突变方法传入的形参
                SET_MSG(state, payload) {
                    state.msg = payload
                },
                SET_CATEGORIES(state, payload) {
                    state.categories = payload
                }
            },
            actions: {
                //动作 用来存放组件共享的异步方法
                async findAllCategories(context) {
                    //let res =await ajax()
                    let res = {
                            status: 200,
                            message: '查询成功',
                            data: [{
                                id: 1,
                                name: "校园新闻"
                            }, {
                                id: 2,
                                name: "热点新闻"
                            }, {
                                id: 3,
                                name: "娱乐新闻"
                            }, {
                                id: 4,
                                name: "资讯快报"
                            }],
                            timestamp: 1634194154016
                        }
                        //提交突变来修改状态机内部中的数据
                    console.log(context);
                    //突变提交的方法 通过commit方法提交 两个参数 第一个参数是突变函数名字 第二个参数是突变函数的实参
                    context.commit('SET_CATEGORIES', res.data)
                },
                //context是一个对象，可以进行解构 解构出commit() dispatch()方法
                async deleteCategoryById(context, id) {
                    let res = await axios.get('url', {
                        id: id
                    })
                }
            }
        })
        new Vue({
            el: '#app',
            data: {
                data1: 'this is vm data',
            },
            methods: {
                //通过辅助函数将vuex中的动作以及突变映射到methods中 然后手动调用
                ...Vuex.mapMutations(['SET_MSG', 'SET_categories']),
                ...Vuex.mapActions(['findAllCategories', 'deleteCategoryById'])
            },
            computed: {
                //使用vuex中的辅助函数来映射数据
                ...Vuex.mapState(['msg', 'categories']),
                ...Vuex.mapGetters(['upperMsg'])
            },
            created() {
                this.findAllCategories();

            },
            //2.将状态机实例注入到vue实例中
            store: store
        })
    </script>
</body>

</html>